<!DOCTYPE html>
<html lang="en">
<head>
  <title>Purple Admin</title>
  <head>
    
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <!-- plugins:css -->
        <link rel="stylesheet" href="librarian/node_modules/mdi/css/materialdesignicons.min.css">
        <link rel="stylesheet" href="librarian/node_modules/perfect-scrollbar/dist/css/perfect-scrollbar.min.css">
        <link rel="stylesheet" href="librarian/node_modules/icheck/skins/all.css" />
        <link rel="stylesheet" href="librarian/node_modules/select2/dist/css/select2.min.css" />
        <link rel="stylesheet" href="librarian/node_modules/select2-bootstrap-theme/dist/select2-bootstrap.min.css" />
        <link rel="stylesheet" href="librarian/css/style.css" />
    
</head>
</head>

<body>
  <div class="container-scroller">
    <!-- partial:../../partials/_navbar.html -->
    
    <nav class="navbar col-lg-12 col-12 p-0 fixed-top d-flex flex-row">
        <div class="text-center navbar-brand-wrapper d-flex align-items-center justify-content-center">
            <a class="navbar-brand brand-logo" href="../../index.html"><img src="librarian/images/Logo.png" alt="Logo"/></a>
            <a class="navbar-brand brand-logo-mini" href="../../index.html"><img src="librarian/images/logo-mini.svg" alt="logo"/></a>
        </div>
        <div class="navbar-menu-wrapper d-flex align-items-stretch">

            <ul class="navbar-nav navbar-nav-right">
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle nav-profile" id="profileDropdown" href="#" data-toggle="dropdown" aria-expanded="false">
                        <!-- img th:src="@{/librarain/images/faces/face1.jpg}" alt="image" -->
                        <span class="d-none d-lg-inline"></span>
                    </a>
                </li>
                <li class="nav-item nav-logout d-none d-lg-block">
                    <a class="nav-link" href="login.html">
                        <i class="mdi mdi-power"></i>
                    </a>
                </li>
            </ul>
            <button class="navbar-toggler navbar-toggler-right d-lg-none align-self-center" type="button" data-toggle="offcanvas">
                <span class="mdi mdi-menu"></span>
            </button>
        </div>
    </nav>

    <!-- partial -->
    <div class="container-fluid page-body-wrapper">
      <div class="row row-offcanvas row-offcanvas-right">
        <!-- partial:../../partials/_sidebar.html -->
        
              <nav class="sidebar sidebar-offcanvas" id="sidebar">
          <ul class="nav">
            <li class="nav-item">
              <a class="nav-link" href="index.html">
                <span class="menu-title">Home</span>
             
                <i class="mdi mdi-home menu-icon"></i>
              </a>
            </li>
            <li class="nav-item">
              <a class="nav-link" data-toggle="collapse" href="#ui-basic" aria-expanded="false" aria-controls="ui-basic">
                <span class="menu-title">Reader Manage</span>
                <i class="menu-arrow"></i>
                <i class="mdi mdi-crosshairs-gps menu-icon"></i>
              </a>
              <div class="collapse" id="ui-basic">
                <ul class="nav flex-column sub-menu">
                  <li class="nav-item"> <a class="nav-link" href="register.html">Register</a></li>
                  <li class="nav-item"> <a class="nav-link" href="ifoModification.html">Information Modification</a></li>
                  <li class="nav-item"> <a class="nav-link" href="readerHistory.html">Reader History</a></li>
                  <li class="nav-item"> <a class="nav-link" href="lendbookreturn.html">Lend and Return</a></li>
                </ul>
                </div>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="category.html">
                <span class="menu-title">Category Manage</span>
                <i class="mdi mdi-contacts menu-icon"></i>
              </a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="bookManage.html">
                <span class="menu-title">Book Manage</span>
                <i class="mdi mdi-format-list-bulleted menu-icon"></i>
              </a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="history.html">
                <span class="menu-title">Delete History</span>
                <i class="mdi mdi-chart-bar menu-icon"></i>
              </a>
            </li>
            <li class="nav-item">
              <a class="nav-link" data-toggle="collapse" href="#inc" aria-expanded="false" aria-controls="inc">
                <span class="menu-title">System Income</span>
                <i class="menu-arrow"></i>
                <i class="mdi mdi-crosshairs-gps menu-icon"></i>
              </a>
              <div class="collapse" id="inc">
                <ul class="nav flex-column sub-menu">
                  <li class="nav-item"> <a class="nav-link" href="totalIncome.html">Total</a></li>
                  <li class="nav-item"> <a class="nav-link" href="totalDeposit.html">Total Deposit</a></li>
                  <li class="nav-item"> <a class="nav-link" href="totalFine.html">Total Fine</a></li>
                </ul>
                </div>
            </li>
            </ul>




        </nav>
        
        <!-- partial -->
        <div class="content-wrapper">
          <div class="row">
          
            
                <div class="col-lg-12">
                  <div id="toolbar" class="btn-group">
              <button id="btn_add" type="button" class="btn btn-primary"
                data-toggle="modal" data-target="#editModal"
                onclick="window.location.href='bookAdd.html'">
                <span class="glyphicon glyphicon-plus" aria-hidden="false"></span>Add
              </button>
              <button id="btn_delete" type="button" class="btn btn-primary"
                data-toggle="modal" data-target="#editModal"
                onclick="window.location.href='bookDelete.html'">
                <span class="glyphicon glyphicon-plus" aria-hidden="false"></span>Delete
              </button>
              
        <div class="search-field ml-4 d-none d-md-block">
            <div class="input-group">
              <input type="text" class="form-control bg-transparent border-0" placeholder="Search Book" id="search">
              <div class="input-group-addon bg-transparent border-0 search-button">
                <button type="button" class="btn btn-sm bg-transparent px-0" onclick="Search()">
                  <i class="mdi mdi-magnify"></i>
                </button>
              </div>
            </div>
        </div>
       
       </div>

                  <div class="card">

                    <div class="card-header d-flex align-items-center">
                      <h3 class="h4">Book Manage</h3>
                    </div>
                    <div class="card-body">
                      <div class="table-responsive">   
                        <table class="table table-striped table-sm">
                          <thead>
                            <tr>
                              <th>ISBN</th>
                              <th>title</th>
                              <th>author</th>
                              <th>price</th>
                              <th>location</th>
                              <th>copyNumber</th>
                              <th>bookId</th>
                              <th>action</th>
                            </tr>
                          </thead>
                           <tbody id="list">

                           </tbody>
                        </table>
                      </div>
                    </div>
                  </div>
                </div>

          </div>
        </div>
        <!-- content-wrapper ends -->
        <!-- partial:../../partials/_footer.html -->
        
    <footer class="footer">
        <div class="d-sm-flex justify-content-center justify-content-sm-between">
            <span class="text-muted text-center text-sm-left d-block d-sm-inline-block">Copyright © 2019</span>
            <span class="float-none float-sm-right d-block mt-1 mt-sm-0 text-center"><i class="mdi mdi-heart text-danger"></i></span>
        </div>
    </footer>

        <!-- partial -->
      </div>
      <!-- row-offcanvas ends -->
    </div>
    <!-- page-body-wrapper ends -->
  </div>
  <!-- container-scroller -->
  <!-- plugins:js -->
  
    <script src="librarian/node_modules/jquery/dist/jquery.min.js"></script>
    <script src="librarian/node_modules/popper.js/dist/umd/popper.min.js"></script>
    <script src="librarian/node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
    <script src="librarian/node_modules/perfect-scrollbar/dist/js/perfect-scrollbar.jquery.min.js"></script>
    <script src="librarian/node_modules/icheck/icheck.min.js"></script>
    <script src="librarian/bower_components/typeahead.js/dist/typeahead.bundle.min.js"></script>
    <script src="librarian/node_modules/select2/dist/js/select2.min.js"></script>
    <script src="librarian/js/off-canvas.js"></script>
    <script src="librarian/js/misc.js"></script>
    <script src="librarian/js/file-upload.js"></script>
    <script src="librarian/js/iCheck.js"></script>
    <script src="librarian/js/typeahead.js"></script>
    <script src="librarian/js/select2.js"></script>
    <script src="librarian/js/JsBarcode.all.js"></script>
    <script>
        function getFormData(dic) {
            formData=new FormData();
            for (var key in dic)
                formData.append(key, dic[key]);
            return formData;
        }
    </script>



      <script>
    // $("#select1").bind("click", function(){
    function join(list){
      var str="";
      for (elem of list)
        str+=list+" ";
      return str;
    }
        $.ajax({
            url: "/api/search/book/description",
            type: "POST",
            dataType:'json',
            async: false, 
            success: function(resp){
              
                $.each(resp.data,
                function(i,values){
                    $('#list').append(
                         // "<tr><td>"+values.bookId+"</td></tr>"
                    "<tr><td>"+values.isbn+"</td>"+
                    "<td>"+values.title+"</td>"+"<td>"+values.author+"</td>"
                    +"<td>"+values.price+"</td>"
                    +"<td>"+values.location+"</td>"
                    +"<td>"+values.copyNumber+"</td>"
                            +"<td>"+values.bookId+"</td>"
                    +"<td>"+"<button onclick=\"window.location.href="+"'/bookUpdate.html'"+"\">update</button>"+"</td></tr>"
                    );
                }
                   
                );
                  console.log(resp.data);
            }   
    });    
</script>

<script>
	function Search(){
		 $.ajax({
            url: "/api/search/book?page=0&limit=20",
            type: "POST",
            dataType:'json',
            async: false, 
            success: function(resp){
             $.each(resp.data,
                function(i,values){
                	$('#list').empty("");
                    $('#list').append(
                         // "<tr><td>"+values.bookId+"</td></tr>"
                    "<tr><td>"+values.bookDescriptionModel.isbn+"</td>"+
                    "<td>"+values.bookDescriptionModel.title+"</td>"+"<td>"+values.bookDescriptionModel.author+"</td>"
                    +"<td>"+values.bookDescriptionModel.price+"</td>"
                    +"<td>"+values.bookDescriptionModel.location+"</td>"
                    +"<td>"+values.bookDescriptionModel.copyNumber+"</td>"
                            +"<td>"+values.bookId+"</td>"
                    +"<td>"+"<button onclick=\"window.location.href="+"'/bookUpdate.html'"+"\">update</button>"+"</td></tr>"
                    );
                }
                   
                );
                  console.log(resp.data);
            }   
    });    
	}
</script>
</body>

</html>
